<template>
  <div class="home">
    <el-backtop></el-backtop>
    <div class="top">
    <el-carousel style="z-index:-1" height="800px" direction="vertical" interval="3000">
      <el-carousel-item v-for="(item) in bannerImg" :key="item.index">
      <img :src="item.url" alt="">
      </el-carousel-item>
        
        
    </el-carousel>
        <div class="logo">
          旅食记
        </div>
        <div class="login">
          <router-link to="/login">
            <el-button style="opacity: 0.6;">用户登录</el-button>
          </router-link>
            <el-button style="margin-left:10px;opacity: 0.6;">联系我们</el-button>
        </div>
        <div class="search">
          <span>来发现最美圣地</span>
          <el-input class="search_btn" v-model="input" placeholder="请输入你的目的地"></el-input>
        </div>
    </div>

    <div class="content">
      <div class="content_box">

        <div class="box">

          <router-link to="/guangzhou">
            <div class="wow animate__animated animate__fadeInLeft box_l">
              <h3>广州</h3>
              <span>这里是广州...</span>
              <img style="width:590px" src="../assets/home/guangzhou.png" alt="">
            </div>
          </router-link>

          <router-link to="/shenzhen">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>深圳</h3>
            <span>这里是深圳...</span>
            <img style="width:590px" src="../assets/home/shenzhen.png" alt="">
          </div>
          </router-link>

        </div>
        <div class="box">

          <router-link to="/zhuhai">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>珠海</h3>
            <span>这里是珠海...</span>
            <img style="width:590px" src="../assets/home/zhuhai.png" alt="">
          </div>
          </router-link>

          <router-link to="/shantou">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>汕头</h3>
            <span>这里是汕头...</span>
            <img style="width:590px" src="../assets/home/shantou.png" alt="">
          </div>
          </router-link>

        </div>
        <!-- <div class="box">

          <router-link to="/chaozhou">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>潮州</h3>
            <span>这里是潮州...</span>
            <img style="width:590px" src="../assets/home/chaozhou.png" alt="">
          </div>
          </router-link>

          <router-link to="/dongguan">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>东莞</h3>
            <span>这里是东莞...</span>
            <img style="width:590px" src="../assets/home/dongguan.png" alt="">
          </div>
          </router-link>

        </div> -->
        <div class="box">

          <!-- <router-link to="/foshan">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>佛山</h3>
            <span>这里是佛山...</span>
            <img style="width:590px" src="../assets/home/foshan.png" alt="">
          </div>
          </router-link> -->

          <router-link to="/heyuan">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>河源</h3>
            <span>这里是河源...</span>
            <img style="width:590px" src="../assets/home/heyuan.png" alt="">
          </div>
          </router-link>

        </div>
        <div class="box">

          <router-link to="/huizhou">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>惠州</h3>
            <span>这里是惠州...</span>
            <img style="width:590px" src="../assets/home/huizhou.png" alt="">
          </div>
          </router-link>
          
          <!-- <router-link to="/jiangmen">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>江门</h3>
            <span>这里是江门...</span>
            <img style="width:590px" src="../assets/home/jiangmen.png" alt="">
          </div>
          </router-link> -->

        </div>
        <div class="box">

          <router-link to="/jieyang">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>揭阳</h3>
            <span>这里是揭阳...</span>
            <img style="width:590px" src="../assets/home/jieyang.png" alt="">
          </div>
          </router-link>

          <router-link to="/maoming">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>茂名</h3>
            <span>这里是茂名...</span>
            <img style="width:590px" src="../assets/home/maoming.png" alt="">
          </div>
          </router-link>

        </div>
        <div class="box">

          <router-link to="/meizhou">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>梅州</h3>
            <span>这里是梅州...</span>
            <img style="width:590px" src="../assets/home/meizhou.png" alt="">
          </div>
          </router-link>

          <router-link to="/qingyuan">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>清远</h3>
            <span>这里是清远...</span>
            <img style="width:590px" src="../assets/home/qingyuan.png" alt="">
          </div>
          </router-link>

        </div>
        <div class="box">

          <router-link to="/shanwei">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>汕尾</h3>
            <span>这里是汕尾...</span>
            <img style="width:590px" src="../assets/home/shanwei.png" alt="">
          </div>
          </router-link>

          <router-link to="/shaoguan">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>韶关</h3>
            <span>这里是韶关...</span>
            <img style="width:590px" src="../assets/home/shaoguan.png" alt="">
          </div>
          </router-link>

        </div>
        <div class="box">

          <router-link to="/yangjiang">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>阳江</h3>
            <span>这里是阳江...</span>
            <img style="width:590px" src="../assets/home/yangjiang.png" alt="">
          </div>
          </router-link>

          <router-link to="/yunfu">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>云浮</h3>
            <span>这里是云浮...</span>
            <img style="width:590px" src="../assets/home/yunfu.png" alt="">
          </div>
          </router-link>

        </div>
        <div class="box">

          <router-link to="/zhanjiang">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>湛江</h3>
            <span>这里是湛江...</span>
            <img style="width:590px" src="../assets/home/zhanjiang.png" alt="">
          </div>
          </router-link>

          <router-link to="/zhaoqing">
          <div class="wow animate__animated animate__fadeInRight box_r">
            <h3>肇庆</h3>
            <span>这里是肇庆...</span>
            <img style="width:590px" src="../assets/home/zhaoqing.png" alt="">
          </div>
          </router-link>

        </div>
        <div class="box">

          <router-link to="/zhongshan">
          <div class="wow animate__animated animate__fadeInLeft box_l">
            <h3>中山</h3>
            <span>这里是中山...</span>
            <img style="width:590px" src="../assets/home/zhongshan.png" alt="">
          </div>
          </router-link>
          
          <div class="wow animate__animated animate__fadeInRight box_r">
            <!-- <h3>中山学院</h3> -->
            <span>这里是ljy的鱼塘...</span>
            <img style="width:590px" src="../assets/home/zhongshanxueyuan.png" alt="">
          </div>
        </div>

        
      </div>
    </div>

    <my-footer></my-footer>

  </div>
</template>

<script>
import {WOW} from 'wowjs'
export default {
  name: 'Home',
  data() {
        return {
            bannerImg:[
                { url: require("@/assets/home/banner1.jpg")},
                { url: require("@/assets/home/banner2.jpg")},
                { url: require("@/assets/home/banner3.jpg")},
                { url: require("@/assets/home/banner4.jpg")},
            ]
        }
    },
    mounted() {
      var wow = new WOW();
      wow.init();
    },
    
}
</script>
<style scoped>
.top{
  width: 100%;
  /* height: 730px; */
  /* background: url(../assets/home/bg.jpeg) ; */
  background-size: 100% 100%;
  padding: 0;
  margin: 0;
  position: relative;
}
.logo {
  position: absolute;
  /* float: left; */
  z-index: 10;
  font-size: 50px;
  left: 60px;
  top: 30px;
  color: #FFF;
  font-family: NSimSun;

}
.login {
  position: absolute;
  top: 50px;
  z-index: 10;
  
  right: 50px;
}
.search {
  z-index: 10;
  top: 60px;

  position: absolute;
}
.search span{
  width: 600px;
  position: absolute;
  font-size: 60px;
  color: #FFF;
  margin-top: 220px;
  margin-left: 450px;
  letter-spacing:20px
}
.search_btn {
  opacity: 0.5;
  width: 500px;
  margin-top: 330px;
  margin-left: 490px;
}
.content {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  width: 100%;
  height: 4200px;
}
.content_box {
  display: flex;
  flex-direction: column;
  width: 1200px;
  height: 100%;
}
.box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 350px;
  margin-bottom: 30px;
}
.box_l ,.box_r {
  height: 100%;
  position: relative;
}

.box_l img,.box_r img {
  height: 100%;
  opacity: 1;
  transition: opacity 1s;
  cursor: pointer;
}
.box_l img:hover,.box_r img:hover {
  opacity: 0.8;
}
.box_l h3 {
  position: absolute;
  font-size: 60px;
  color: #FFF;
  font-family: NSimSun;
  margin-top: 20px;
  margin-left: 30px;
}
.box_l span {
  position: absolute;
  color: #FFF;
  font-family: NSimSun;
  font-size: 18px;
  margin-top: 100px;
  margin-left: 30px;
}
.box_r h3 {
  position: absolute;
  font-size: 60px;
  color: #FFF;
  font-family: NSimSun;
  margin-top: 20px;
  margin-left: 420px;
}
.box_r span {
  position: absolute;
  color: #FFF;
  font-family: NSimSun;
  font-size: 18px;
  margin-top: 100px;
  margin-left: 400px;
}

</style>
